<template>
  <div class="home">
    <div>
      <my-calendar class="home-calendar" v-model="today">
        <div slot="title" class="home-title">
          <i class="el-icon-date" />
          日程管理
        </div>
        <div
          class="calendar-cell"
          slot="dateCell"
          slot-scope="{ date, data }"
          @dblclick="newTask(date)"
        >
          <div class="calendar-day">
            {{ $moment(date).format("D") }}
            <br />
            <i class="el-icon-s-flag" v-if="data.isSelected" />
          </div>
          <div class="calendar-list">
            <div
              class="calender-todo"
              v-for="(item, i) in list[data.day]"
              :key="i"
              :style="todoStyle(item)"
              @click.exact="todoClick(item)"
            >
              {{ item.title }}
            </div>
          </div>
        </div>
      </my-calendar>
    </div>
    <div
      class="home-info"
      :style="{ height: height - 664 - 48 - 48 - 60 - 48 + 'px' }"
    >
      <div class="home-info-title">
        {{ todo.title }}
      </div>
      <div>
        <span v-if="todo.leader">发布者：{{todo.leader}}</span><span v-if="todo.time"> 截止时间:{{$moment(todo.time).format('yyyy-MM-DD HH:mm')}}</span>
      </div>
      <div>
        {{ todo.remarks }}
      </div>
    </div>
    <el-dialog
      title="创建任务"
      :visible.sync="createTask"
      :close-on-click-modal="false"
      destroy-on-close
      append-to-body
    >
      <task-form @ok="taskOk" v-model="taskForm" />
    </el-dialog>
  </div>
</template>

<script>
import MyCalendar from "@comp/base/calendar/main.vue";
import TaskForm from "@comp/todo/TaskForm.vue";

import Mock from "mockjs";
export default {
  components: { MyCalendar, TaskForm },
  data() {
    return {
      list: {},
      today: new Date(),
      todo: {},
      height: document.documentElement.clientHeight,
      createTask:false,
      taskForm:{},
    };
  },
  methods: {
    todoStyle(item) {
      let opacity = 1
      if (item.time<new Date(Date.parse(this.$moment().format('yyyy-MM-DD')+' 00:00:00'))){
        opacity = .3
      }
      switch (item.type) {
        case "todo":
          return { backgroundColor: "#909399",opacity };
        case "task":
          return { backgroundColor: "#67C23A",opacity };
        case "system":
          return { backgroundColor: "#E6A23C",opacity };
        case "approval":
          return { backgroundColor: "#F56C6C",opacity };
        default:
          return { backgroundColor: "#909399",opacity };
      }
    },
    todoClick(item) {
      this.todo = item;
      console.log(item);
    },
    newTask(date) {
      this.createTask=true
    },
    taskOk(task, createTask) {
      this.createTask = createTask;
      console.log(task, createTask);
    },
  },
  created() {
    //TODO: 改成从通用api获取数据，利用find或者查找对应的list
    //TODO: 选中todo应该有相应的样式变化
    // this.$api.post("/api/todo/month",this.today).then()
    const now = new Date();
    let nowMonth = now.getMonth();
    let nowYear = now.getFullYear();
    let start = new Date(nowYear, nowMonth, 1);
    let end = new Date(nowYear, nowMonth + 1, 0);
    for (let i = start.getDate(); i <= end.getDate(); i++) {
      const todos = Mock.mock({
        "list|0-5": [
          {
            id: "@id",
            "priority|1": ["1", "2", "3", "4"],
            title: "@ctitle",
            remarks: "@cparagraph",
            finished: "@boolean",
            "tags|0-10": ["@ctitle"],
            executor: "",
            executorName: "",
            time: new Date(nowYear, nowMonth, i),
            "leader|1": ["@id", undefined],
            "type|1": ["task", "todo", "system", "approval"],
          },
        ],
      });
      this.list[
        this.$moment(new Date(nowYear, nowMonth, i)).format("yyyy-MM-DD")
      ] = todos.list;
    }
  },
  watch: {
    today(val, old) {
      if (
        val.getFullYear() != old.getFullYear() ||
        val.getMonth() != old.getMonth()
      ) {
        this.list = {};
        const now = val;
        let nowMonth = now.getMonth();
        let nowYear = now.getFullYear();
        let start = new Date(nowYear, nowMonth, 1);
        let end = new Date(nowYear, nowMonth + 1, 0);
        for (let i = start.getDate(); i <= end.getDate(); i++) {
          const todos = Mock.mock({
            "list|0-5": [
              {
                id: "@id",
                "priority|1": ["1", "2", "3", "4"],
                title: "@ctitle",
                remarks: "@cparagraph",
                finished: "@boolean",
                "tags|0-10": ["@ctitle"],
                executor: "",
                executorName: "",
                time: new Date(nowYear, nowMonth, i),
                "leader|1": ["@id", undefined],
                "type|1": ["task", "todo", "system", "approval"],
              },
            ],
          });
          this.list[
            this.$moment(new Date(nowYear, nowMonth, i)).format("yyyy-MM-DD")
          ] = todos.list;
        }
      }
    },
  },
  mounted() {
    const self = this;
    //根据窗口大小调整
    window.onresize = () => {
      return (() => {
        window.fullHeight = document.documentElement.clientHeight;
        self.height = window.fullHeight - 50;
      })();
    };
  },
};
</script>
<style lang="less" scoped>
.home-title {
  font-weight: bold;
}

.home-calender {
  position: relative;
}
.home-info {
  padding: 10px;
  margin: 0 20px;
  background-color: #ececec;
  border-radius: 3px;
  word-wrap: break-word;
  overflow-x: hidden;
  overflow-y: auto;
}
.calendar-cell {
  display: flex;
  overflow: hidden;
}
.calendar-day {
  justify-content: start;
  width: 20px;
  flex: 0 0 20px;
  i {
    color: red;
  }
}
.calendar-list {
  justify-content: end;
  width: 100%;
  overflow: hidden;
  height: 70px;
}
.calender-todo {
  margin-bottom: 2px;
  font-size: 12px;
  border-radius: 3px;
  overflow: hidden;
  padding: 0 5px;
  color: #fff;
  cursor: pointer;
}
.calender-todo:hover {
  color:#000;
}
</style>
